<template>
	<view class="carlist">
		<!-- 列表名称描述 -->
			<view class="items">
			<view class="cell_item" :style="{ 'width': tabCurrent==1 ? '' : '605rpx' }">
				<lauwen-select :options="options" :defaultIndex="1" :height="45"  :fontSize="'22rpx'"
					@getValue="getValue"></lauwen-select>
			</view>
			<view class="add"  @click="addreport">
				新增
			</view>
		</view>
		<!-- 列表项 -->
	
		<view class="items" v-for="(item,index) in sszzList "   >
			<view class="titles">
				<view class="title">
					车牌:{{item.vehicleNo}}
				</view>
				<view class="title">
					定位状态:{{item.isOnline == 1 ? "在线" : '不在线' }}
				</view>
				<view class="title">
					定位时间:{{item.dateTime}}
				</view>
				<view class="title"  @click="navigationToEvent"  >
					当前位置:点击导航
				</view>
			</view>
	
		</view>
		<!-- 唤起选项 -->
		<u-action-sheet :list="list" @click="selectitem" v-model="showsheet" mask>
		</u-action-sheet>
	</view>
</template>

<script>
import mescrollList from '@/components/mescroll-uni/mescroll-list.vue'
	import mescrollMixins from '@/components/mescroll-uni/mescroll-mixins.js'
	import orderCard from '@/components/orderCard/orderCard.vue'
	import lauwenSelect from "@/components/lauwen-select/lauwenSelect.vue"
	import {
		getWordOrder,
		sceneList,
		getMyList,
		getTakeTask
	} from '@/pages/api/orderp/orderp.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		data(){
			return {
				showsheet:false,
				list: [{
					color: '#363A44',
					fontSize: '29rpx',
					text: '违规消纳点'
				}, {
					color: '#363A44',
					fontSize: '29rpx',
					text: '违规处置'
				}, {
					color: '#363A44',
					fontSize: '29rpx',
					text: '渣土车违规案件'
				}],
				sszzList:{}
			}
		},
		components:{
			lauwenSelect
		},
		computed:{
			// getlocalion(lat,lon){
			// 	this.test.getRegeo({
			// 		location: lat + ',' + lon, //location的格式为'经度,纬度'
			// 		//成功回调
			// 		success: (data)=> {
			// 			console.log(data[0].regeocodeData.formatted_address,data[0].name)
			// 			return data[0].regeocodeData.formatted_address
			// 		},
			// 		fail: function(info) {
			// 			//失败回调
			// 			console.log(info)
			// 		}
			// 	})
			// }
		},
		methods:{
			selectitem(item) {
				console.log(item)
				this.showsheet = false
				uni.navigateTo({
					url: '/pages/report/addpage/addpage?type=' + item
				})
			},
			//新增上报
			addreport() {
				this.showsheet = true
			},
			gotogae(item){
				console.log(2)
				uni.navigateTo({
					url:'/pages/workorder/detailList'
				})
			},
			// 导航
			navigationToEvent() {
				uni.getLocation({
				    type: 'wgs84', //返回可以用于uni.openLocation的经纬度
				    success:  (res)=> {
				        const latitude = parseFloat(res.latitude);
				        const longitude =parseFloat(res.longitude) ;
						console.log(latitude)
						// const latitude = 116.396574;
						// const longitude = 39.992706;
						this.test.getRegeo({
							location: longitude + ',' + latitude, //location的格式为'经度,纬度'
							//成功回调
							success: (data)=> {
								console.log(data)
								
								uni.openLocation({
								    latitude: latitude,
								    longitude: longitude,
									name:data[0].name,
									address:data[0].regeocodeData.formatted_address,
								    success: function () {
								        console.log('success');
								    }
								});
							},
							fail: function(info) {
								//失败回调
								console.log(info)
							}
						})
				       
				    }
				});
			},
			//获取地址
			//高德地址信息
		
		}
	}
	
</script>

<style lang="scss" scoped  >
	.carlist{
		background-color: #FFFFFF;
		
		.items {
			z-index: 999;
			display: flex;
		
			.add {
				background-color: #FFFFFF;
				width: 145rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #363A44;
				border-left: 1px solid #DBDBDB;
				border-bottom: .5rpx solid #DBDBDB;
			}
			.cell_item {
				margin-top: 2rpx;
				background-color: #FFFFFF;
				border-bottom: 1.5rpx solid #DBDBDB;
			}
		}
		
	}
	.titles{
		margin-left: 14rpx;
		margin-top: 28rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #EFEFEF;
	}
	
	.title{
		display: flex;
		font-size: 31rpx;
		color: #363A44;
		margin-bottom: 22rpx;
	}
	.card{
		margin: 4rpx 0 0 14rpx;
		font-size: 22rpx;
		border-radius: 4rpx;
		height: 31rpx;
		line-height: 31rpx;
		text-align: center;
		width: 65rpx;
		background-color: #2E5AFB;
		color: #FFFFFF;
	}
</style>
